<!--https://codepen.io/danielarlert/pen/LYNVyPL-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Personal website</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <style >
     :root {
       /* COLORS */
       --white: #e9e9e9;
       --gray: #333;
       --blue: #0367a6;
       --lightblue: #008997;

       /* RADII */
       --button-radius: 0.7rem;

       /* SIZES */
       --max-width: 758px;
       --max-height: 420px;

       font-size: 16px;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
       Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     }

     body {
       align-items: center;
       background-color: var(--white);
       background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");
       background-attachment: fixed;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       display: grid;
       height: 100vh;
       place-items: center;
     }

     .form__title {
       font-weight: 300;
       margin: 0;
       margin-bottom: 1.25rem;
     }

     .link {
       color: var(--gray);
       font-size: 0.9rem;
       margin: 1.5rem 0;
       text-decoration: none;
     }

     .container {
       background-color: var(--white);
       border-radius: var(--button-radius);
       box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
       0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
       height: var(--max-height);
       max-width: var(--max-width);
       overflow: hidden;
       position: relative;
       width: 100%;
     }

     .container__form {
       height: 100%;
       position: absolute;
       top: 0;
       transition: all 0.6s ease-in-out;
     }

     .container--signin {
       left: 0;
       width: 50%;
       z-index: 2;
     }

     .container.right-panel-active .container--signin {
       transform: translateX(100%);
     }

     .container--signup {
       left: 0;
       opacity: 0;
       width: 50%;
       z-index: 1;
     }

     .container.right-panel-active .container--signup {
       animation: show 0.6s;
       opacity: 1;
       transform: translateX(100%);
       z-index: 5;
     }

     .container__overlay {
       height: 100%;
       left: 50%;
       overflow: hidden;
       position: absolute;
       top: 0;
       transition: transform 0.6s ease-in-out;
       width: 50%;
       z-index: 100;
     }

     .container.right-panel-active .container__overlay {
       transform: translateX(-100%);
     }

     .overlay {
       background-color: var(--lightblue);
       background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg");
       background-attachment: fixed;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       height: 100%;
       left: -100%;
       position: relative;
       transform: translateX(0);
       transition: transform 0.6s ease-in-out;
       width: 200%;
     }

     .container.right-panel-active .overlay {
       transform: translateX(50%);
     }

     .overlay__panel {
       align-items: center;
       display: flex;
       flex-direction: column;
       height: 100%;
       justify-content: center;
       position: absolute;
       text-align: center;
       top: 0;
       transform: translateX(0);
       transition: transform 0.6s ease-in-out;
       width: 50%;
     }

     .overlay--left {
       transform: translateX(-20%);
     }

     .container.right-panel-active .overlay--left {
       transform: translateX(0);
     }

     .overlay--right {
       right: 0;
       transform: translateX(0);
     }

     .container.right-panel-active .overlay--right {
       transform: translateX(20%);
     }

     .btn {
       background-color: var(--blue);
       background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
       border-radius: 20px;
       border: 1px solid var(--blue);
       color: var(--white);
       cursor: pointer;
       font-size: 0.8rem;
       font-weight: bold;
       letter-spacing: 0.1rem;
       padding: 0.9rem 4rem;
       text-transform: uppercase;
       transition: transform 80ms ease-in;
     }

     .form > .btn {
       margin-top: 1.5rem;
     }

     .btn:active {
       transform: scale(0.95);
     }

     .btn:focus {
       outline: none;
     }

     .form {
       background-color: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       padding: 0 3rem;
       height: 100%;
       text-align: center;
     }

     .input {
       background-color: #fff;
       border: none;
       padding: 0.9rem 0.9rem;
       margin: 0.5rem 0;
       width: 100%;
     }

     @keyframes show {
       0%,
       49.99% {
         opacity: 0;
         z-index: 1;
       }

       50%,
       100% {
         opacity: 1;
         z-index: 5;
       }
     }

   </style>

</head>
<body>
<div class="container right-panel-active">
  <!-- Sign Up注册 -->
  <div class="container__form container--signup">
    <form id="register-form" action="#" class="form" method="post">
      <h2 class="form__title">Sign Up</h2>
      <input type="text" name="RegisterUsername" id="RegisterUsername" placeholder="User" class="input" pattern="^[A-Za-z0-9]+$" title="用户名由字母和数字组成" required="required"/>
      <input type="email" name="RegisterEmail" id="RegisterEmail" placeholder="Email" class="input" pattern="^\w+@\w+(\.\w+){1,2}$" title="请输入正确的邮箱"/>
      <input type="password" name="RegisterPassword" id="RegisterPassword" placeholder="Password" class="input" pattern="^[a-zA-Z0-9]{6,10}$" title="密码由6-10位字母和数字组成" required="required"/>
      <button class="btn" type="submit">Sign Up</button>
    </form>
  </div>

  <!-- Sign In 登录-->
  <div class="container__form container--signin">
    <form id="login-form" action="/loginProcessor" method="POST" class="form">
      <h2 class="form__title">Sign In</h2>
      <input type="text" name="username" id="username" placeholder="Username" class="input" required="required"/>
      <input type="password" name="password" id="password" placeholder="Password" class="input" required="required" />
      <a href="/remake" class="link">Forgot your password?</a>
      <button class="btn" type="submit">Sign In</button>
    </form>
  </div>

  <!-- Overlay功能转换 -->
  <div class="container__overlay">
    <div class="overlay">
      <div class="overlay__panel overlay--left">
        <button class="btn" id="signIn">Sign In</button>
      </div>
      <div class="overlay__panel overlay--right">
        <button class="btn" id="signUp">Sign Up</button>
      </div>
    </div>
  </div>
</div>

<script>
  const signInBtn = document.getElementById("signIn");
  const signUpBtn = document.getElementById("signUp");
  const fistForm = document.getElementById("register-form");
  const secondForm = document.getElementById("login-form");
  const container = document.querySelector(".container");

  signInBtn.addEventListener("click", () => {
    container.classList.remove("right-panel-active");
  });

  signUpBtn.addEventListener("click", () => {
    container.classList.add("right-panel-active");
  });

  fistForm.addEventListener("submit", (e) => e.preventDefault());
  secondForm.addEventListener("submit", (e) => e.preventDefault());



  const form = document.getElementById('login-form');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表单自动提交
    // 这里编写提交表单的代码
    form.submit(); // 手动提交表单
  });
  // $(function () {
  //   $("#login-form").submit(function (event) {
  //     event.preventDefault();
  //     var formData = $(this).serialize();
  //
  //     $.ajax({
  //       type: "POST",
  //       url: "/loginProcessor",
  //       data: formData,
  //       success: function (result) {
  //
  //         if (result === null) {
  //           alert("登录失败！");
  //
  //         }
  //       },
  //       error: function () {
  //         alert("登录错误！");
  //       }
  //     });
  //   });
  // });

  $(function () {
    $("#register-form").submit(function (event) {
      event.preventDefault();
      var formData = $(this).serialize();
      $.ajax({
        type: "POST",
        url: "/registerProcessor",
        data: formData,
        success: function (result) {
          var code = result.success;
          if (code === true) {
            alert("注册成功！");
          } else {
            alert("注册失败！");
          }
        },
        error: function () {
          alert("注册错误！");
        }
      });
    });
  });


</script>
</body>
</html>